<template>
  <div class="app-container">
    <div class="custom_card_0">
      <NewMenuTabs :list="tabs_list" :labelStyle="{width:'100px',paddingTop:'12px'}" name="订单来源" :column="10" :key="1" :active="sourceActive" @tabs_click="orderSourceChange" style="margin-bottom: 10px"></NewMenuTabs>
      <NewMenuTabs :list="tabs_list1" :labelStyle="{width:'100px',paddingTop:'12px'}" name="订单统计" :column="10" :key="1" :active="active" @tabs_click="orderTypeChange" style="margin-bottom: 10px"></NewMenuTabs>
    </div>
    <div class="custom_card_0" v-show="showSearch">
      <el-form inline :model="queryParams" size="mini" ref="queryForm" label-position="right">
        <div style="margin-bottom: 10px;border-bottom: 1px #DDDDDD solid">
          <el-row :gutter="10" class="mb10">

            <el-col :span="1.5">
              <el-button class="first-plain-btn"  size="medium" @click="handleSync">同步至日租订单</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  class="sec-plain-btn"  size="medium" @click="goToPage(5)" v-hasPermi="['car:ota:inventory']">库存占用释放</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="thr-plain-btn"  size="medium" @click="goToPage(1)" v-hasPermi="['bills:otaOrder:statistics']">租金统计</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="opensyncmodel=true" v-hasPermi="['system:otamodel:index']">车型同步</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="goToPage(2)" v-hasPermi="['system:otaAccount:index']">账号配置</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="goToPage(3)" v-hasPermi="['system:otastore:index']">门店配置</el-button>
            </el-col>
<!--            <el-col :span="1.5">
              <el-button class="primary-plain-btn" size="medium" @click="goToPage(4)" v-hasPermi="['system:otamodel:index']">车型配置</el-button>
            </el-col>-->
          </el-row>
        </div>
        <div style="display: flex;">
          <div :class="{'min-box':!showAll}">
            <el-form-item label-width="auto" label="订单编号" prop="orderEncryptId">
              <el-input v-model="queryParams.orderEncryptId" clearable placeholder="请输入订单编号"></el-input>
            </el-form-item>
            <el-form-item label-width="auto" label="预定车型" prop="reserveVehicleInfos">
              <el-input v-model="queryParams.reserveVehicleInfos" clearable placeholder="请输入预定车型"></el-input>
            </el-form-item>
<!--            <el-form-item label-width="auto" label="客户信息" prop="costumerName">-->
<!--              <el-input v-model="queryParams.costumerName" clearable placeholder="请输入客户姓名或号码"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label-width="auto" label="取车门店" prop="platformPickUpStoreId">
              <el-select v-model="queryParams.platformPickUpStoreId" clearable >
                <el-option v-for="(item,index) in storeOptions" :key="index" :label="item.storeName" :value="item.storeId" placeholder="请选择取车门店"/>
              </el-select>
            </el-form-item>
            <el-form-item label-width="auto" label="还车门店" prop="platformPickOffStoreId">
              <el-select v-model="queryParams.platformPickOffStoreId" clearable >
                <el-option v-for="(item,index) in storeOptions" :key="index" :label="item.storeName" :value="item.storeId" placeholder="请选择还车门店"/>
              </el-select>
            </el-form-item>
            <el-form-item label-width="auto" label="订单状态" prop="orderStatusName"  v-if="sourceActive">
              <el-select v-model="queryParams.orderStatusName" clearable>
                <template v-for="(item,index) in syncStatusOptions">
                  <el-option :label="item.label" :value="item.label" :key="index"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-row></el-row>
            <el-form-item label-width="auto" label="预计取车时间"   prop="takeTimeRange">
              <el-date-picker clearable size="small" v-model="queryParams.takeTimeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="takeTimeChange"></el-date-picker>
            </el-form-item>
            <el-form-item label-width="auto" label="实际取车时间"   prop="actualTakeTimeRange">
              <el-date-picker clearable size="small" v-model="queryParams.actualTakeTimeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="actualTakeTimeChange"></el-date-picker>
            </el-form-item>
            <el-form-item label-width="auto" label="预计还车时间"   prop="rentalTimeRange">
              <el-date-picker clearable size="small" v-model="queryParams.rentalTimeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="rentalTimeChange"></el-date-picker>
            </el-form-item>
            <el-form-item label-width="auto" label="实际还车时间"   prop="actualTimeRange">
              <el-date-picker clearable size="small" v-model="queryParams.actualTimeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="actualTimeChange"></el-date-picker>
            </el-form-item>
            <el-form-item label-width="auto" label="下单时间"  prop="createTimeRange">
              <el-date-picker clearable size="small" v-model="queryParams.createTimeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="createTimeChange"></el-date-picker>
            </el-form-item>
          </div>
          <div style="align-self: flex-end">
            <el-form-item style="width: 220px !important;">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="text" size="mini" @click="showAll=!showAll;resetQueruyForm()">{{ showAll ? '收起' : '展开' }}<i :class="showAll?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="custom_card">
      <el-row :gutter="10" class="mb8">
<!--        <el-col :span="1.5">
          <el-button
            class="first-plain-btn"
            icon="el-icon-upload2"
            size="medium"
            @click="handleImport"
          >导入</el-button>
        </el-col>-->
        <el-col :span="1.5">
          <el-button
            class="sec-plain-btn"
            icon="el-icon-download"
            size="medium"
            :loading="exportLoading"
            @click="handleExport"
          >导出</el-button>
        </el-col>
        <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>

      <el-table v-loading="loading" :data="ctripList" border  @selection-change="handleSelectionChange">

        <el-table-column
          type="selection"
          :selectable="selectable"
          width="55" align="center">
        </el-table-column>

        <el-table-column label="订单编号" align="center" min-width="100"  show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.orderEncryptId }}
          </template>
        </el-table-column>

<!--        <el-table-column label="承租人" align="center" min-width="130" show-overflow-tooltip>-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.costumerName }}</span>-->
<!--            <span>{{ row.costumerTel }}</span>-->
<!--            <span>{{ row.customerTypeName }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="预约租期" min-width="280" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
          <span>
            {{row.estimatedPickUpTime}}~{{row.estimatedPickOffTime}}
          </span>
          </template>
        </el-table-column>


        <el-table-column label="预定车型" min-width="280"  align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div class="model-text">{{ row.reserveVehicleInfos }}</div>
            <div class="plat-model" v-if="row.modelName">对应系统:{{ row.modelName }}</div>
          </template>
        </el-table-column>

        <el-table-column label="车牌号" min-width="100"  align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div class="model-text">{{ row.carLicenceNum }}</div>
          </template>
        </el-table-column>

        <el-table-column label="订单状态" min-width="80" align="center"  show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.orderStatusName}}
          </template>
        </el-table-column>

        <el-table-column label="取还方式" min-width="80" align="center"  show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.orderIsSendNameForPickUp}}~{{row.orderIsSendNameForPickOff}}
          </template>
        </el-table-column>

        <el-table-column label="取还门店" min-width="350" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.pickUpStoreName}}~{{row.pickOffStoreName}}
          </template>
        </el-table-column>

        <el-table-column label="取还地址" min-width="350" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.pickUpAddress}}~{{row.pickOffAddress}}
          </template>
        </el-table-column>

        <el-table-column label="实际租期" min-width="200" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.actualPickUpTime}}~{{row.actualPickOffTime||'--'}}
          </template>
        </el-table-column>

        <el-table-column label="发车员" min-width="200" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.pickUpDriverName||'--'}}
          </template>
        </el-table-column>

        <el-table-column label="收车员" min-width="200" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.pickOffDriverName||'--'}}
          </template>
        </el-table-column>

        <el-table-column label="对应平台门店" min-width="200" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.platformPickUpStoreName}}~{{row.platformPickOffStoreName}}
          </template>
        </el-table-column>

        <el-table-column label="下单时间" align="center" min-width="200" prop="createOrderDateTime"  show-overflow-tooltip/>
        <el-table-column label="订单来源" align="center" prop="orderSource"  show-overflow-tooltip/>

        <el-table-column label="租金总额" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>¥{{row.actualAmount == 0 ? row.amount : row.actualAmount}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center"  width="80" fixed="left" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['ota:ctrip:edit']"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改携程订单对话框 -->
    <el-dialog title="同步日志" :visible.sync="openLogs" width="1100px" append-to-body>
      <grapLogs v-if="openLogs"></grapLogs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openLogs=false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 车型同步 -->
    <el-dialog title="车型同步" :visible.sync="opensyncmodel" width="1100px" append-to-body>
      <syncmodel v-if="opensyncmodel" @cancel="opensyncmodel=false" @success="syncSuccess"></syncmodel>

    </el-dialog>


    <grap-config :open="openSync" v-if="openSync" @close="openSync=false"></grap-config>
    <!-- 添加或修改携程订单对话框 -->
    <el-dialog title="订单详情" :visible.sync="open" width="1100px" append-to-body>
      <MmvTitle title="订单信息"></MmvTitle>
      <el-descriptions class="margin-top margin-bottom"  :column="2"  border>
        <el-descriptions-item label-class-name="my-descriptions-label"  span="2"><template slot="label">	订单创建时间	</template>{{form.createOrderDateTime	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	订单来源	</template>{{form.orderSource	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	订单状态	</template>{{form.orderStatusName	}}</el-descriptions-item>
      </el-descriptions>
      <MmvTitle title="预定信息" ></MmvTitle>
      <el-descriptions class="margin-top margin-bottom"  :column="2"  border>

        <el-descriptions-item label-class-name="my-descriptions-label"  span="2"><template slot="label">	预定车型	</template>{{form.reserveVehicleInfos	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	预约取车时间	</template>{{form.estimatedPickUpTime	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	预约还车时间	</template>{{form.estimatedPickOffTime	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租期天数	</template>{{form.rentDays	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租期小时	</template>{{form.rentHours	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	取车门店	</template>{{form.pickUpStoreName	}}({{form.orderIsSendNameForPickUp	}})</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	还车门店	</template>{{form.pickOffStoreName	}}({{form.orderIsSendNameForPickOff	}})</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label"  span="2"><template slot="label">	取车地址	</template>{{form.pickUpAddress	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label"  span="2"><template slot="label">	还车地址	</template>{{form.pickOffAddress	}}</el-descriptions-item>
      </el-descriptions>
<!--      <MmvTitle title="客户信息" ></MmvTitle>-->
<!--      <el-descriptions class="margin-top margin-bottom"  :column="2"  border>-->
<!--        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	客户名称	</template>{{form.costumerName	}}</el-descriptions-item>-->
<!--        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	客户电话	</template>{{form.costumerTel	}}</el-descriptions-item>-->
<!--        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	证件号	</template>{{form.constumerId	}}</el-descriptions-item>-->
<!--        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	客户类型	</template>{{form.customerTypeName	}}</el-descriptions-item>-->
<!--      </el-descriptions>-->
      <MmvTitle title="费用信息" ></MmvTitle>
      <el-descriptions class="margin-top margin-bottom"  :column="3"  border>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租车费	</template>{{form.amount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	实际租车费	</template>{{form.actualAmount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租金支付方式	</template>{{form.payWayName	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租车押金金额	</template>{{form.preAuthAmount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租车押金扣款金额	</template>{{form.preauthinfoPreAuthAmount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	租车押金支付方式	</template>{{form.payCarPreAuthWayName	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	违章押金金额	</template>{{form.depPreAuthAmount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	违章押金扣款金额	</template>{{form.preauthinfoDepPreAuthAmount	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	违章押金支付方式	</template>{{form.payDepPreAuthWayName	}}</el-descriptions-item>
      </el-descriptions>
      <MmvTitle title="取还信息" ></MmvTitle>
      <el-descriptions class="margin-top margin-bottom"  :column="3"  border>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	车牌号	</template>{{form.carLicenceNum	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label"  span="2"><template slot="label">	车架号	</template>{{form.frameNum	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	取车里程	</template>{{form.pickupMile	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	实际取车时间	</template>{{form.actualPickUpTime	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	取车油量	</template>{{form.pickupFuel	}}/16</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	还车里程	</template>{{form.pickoffMile	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	实际还车时间	</template>{{form.actualPickOffTime	}}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" ><template slot="label">	还车油量	</template>{{form.pickoffFuel	}}/16</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 导入对话框 style="text-align: center;"  text-center-->
    <el-dialog :title="upload.title" :visible.sync="upload.open" min-width="400px" append-to-body >
      <el-row style="margin-bottom: 10px;">
        订单来源：
        <el-select v-model="upload.data.orderSource" clearable style="width:280px">
          <template v-for="(dict,index) in dict.type.ota_order_resource">
            <el-option :label="dict.label" :value="dict.value" :key="index"></el-option>
          </template>
        </el-select>
      </el-row>
      <el-row style="margin-bottom: 10px;margin-left: 71px;">
        <el-upload ref="upload"
                   :data="upload.data"
                   :multiple="true"
                   accept=".xlsx, .xls"
                   :headers="upload.headers"
                   :action="upload.url + '?updateSupport=' + upload.updateSupport"
                   :disabled="upload.isUploading"
                   :on-change="handleChange"
                   :on-progress="handleFileUploadProgress"
                   :on-success="handleFileSuccess"
                   :auto-upload="false" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!--          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
          </div>
        </el-upload>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCtrip, getCtrip, delCtrip, addCtrip, updateCtrip, exportCtrip,selectOrderCount ,otaSyncOrders,batchOtaSyncOrders} from "@/api/ota/ctrip";
import grapConfig from '../grapConfig.vue'
import grapLogs from '../grapLogs.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import syncmodel from '../components/syncmodel';
import {getToken} from "@/utils/auth";
import NewMenuTabs from "@/components/custom/newMenuTabs";
import {getAllStore} from "@/api/store/store";
export default {
  name: "Ctrip",
  components: {grapConfig,MmvTitle,grapLogs,syncmodel,NewMenuTabs},
  dicts: ['ota_order_resource'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 门店数据
      storeOptions: [],
      // 选中数组
      ids: [],
      //同步类型 0: 没有选中项 1:单个同步 >1.批量同步
      syncType: 0,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 携程订单表格数据
      ctripList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openSync: false,
      openLogs: false,
      opensyncmodel: false,
      showAll: false,
      startTime:[],
      // 查询参数
      queryParams: {
        type: 1,
        pageNum: 1,
        pageSize: 10,
        createOrderDateTime: null,
        reserveVehicleInfos: null,
        estimatedPickUpTime: null,
        estimatedPickOffTime: null,
        platformPickOffStoreId: null,
        platformPickUpStoreId: null,
        rentDays: null,
        rentHours: null,
        realRentDays: null,
        pickUpStoreName: null,
        pickUpAddress: null,
        orderIsSendNameForPickUp: null,
        pickOffStoreName: null,
        pickOffAddress: null,
        orderIsSendNameForPickOff: null,
        orderSource: null,
        orderSourceCode: null,
        orderStatus: null,
        orderStatusName: null,
        costumerName: null,
        costumerTel: null,
        constumerId: null,
        customerType: null,
        customerTypeName: null,
        amount: null,
        actualAmount: null,
        payWay: null,
        payWayName: null,
        preAuthAmount: null,
        payCarPreAuthWay: null,
        payCarPreAuthWayName: null,
        preauthinfoPreAuthAmount: null,
        depPreAuthAmount: null,
        payDepPreAuthWay: null,
        payDepPreAuthWayName: null,
        preauthinfoDepPreAuthAmount: null,
        pickupMile: null,
        actualPickUpTime: null,
        pickupFuel: null,
        pickoffMile: null,
        actualPickOffTime: null,
        pickoffFuel: null,
        carLicenceNum: null,
        frameNum: null,
        tenantId: null,
        deptId: null,
        takeStartTime: null,
        takeEndTime: null,
        actualTakeStart: null,
        actualTakeEnd: null,
        rentalStartTime: null,
        rentalEndTime:null,
        actualStartTime:null,
        createStartTime:null,
        createEndTime:null,
        actualEndTime:null,
        takeTimeRange:[],
        actualTakeTimeRange:[],
        actualTimeRange:[],
        rentalTimeRange:[],
        createTimeRange:[],


      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },

      upload: {
        open: false,
        title: '',
        isUploading: false,
        updateSupport: 0,
        loading: null,
        data:{
          orderSource: null,
        },
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        url: process.env.VUE_APP_BASE_API + '/ota/ctrip/importOrder'
      },

      active: 1,
      sourceActive: '',
      tabs_list: [
        {
          key: '',
          name: '全部订单',
          count: 0
        },
        {
          key: 'xc',
          name: '携程订单',
          count: 0
        },
        {
          key: 'hl',
          name: '哈啰订单',
          count: 0
        },
        {
          key: 'wk',
          name: '悟空订单',
          count: 0
        },
        {
          key: 'zzc',
          name: '租租车订单',
          count: 0
        },
        {
          key: 'at',
          name: '凹凸订单',
          count: 0
        },
        {
          key: 'fz',
          name: '飞猪订单',
          count: 0
        }
      ],
      tabs_list1: [
        {
          key: '1',
          name: '全部',
          count: 0
        },
        {
          key: '2',
          name: '待排车',
          count: 0
        },
        {
          key: '3',
          name: '待取车',
          count: 0
        },
        {
          key: '4',
          name: '用车中',
          count: 0
        },
        {
          key: '5',
          name: '明日取车',
          count: 0
        },
        {
          key: '6',
          name: '明日还车',
          count: 0
        },
        {
          key: '7',
          name: '今日取车',
          count: 0
        },
        {
          key: '8',
          name: '今日还车',
          count: 0
        },
        {
          key: '9',
          name: '2小时内取车',
          count: 0
        },
        {
          key: '10',
          name: '2小时内还车',
          count: 0
        },
        {
          key: '11',
          name: '逾期未取车',
          count: 0
        },
        {
          key: '12',
          name: '逾期未还车',
          count: 0
        }
      ],
    };
  },

  computed: {
    // 订单状态
    syncStatusOptions: function () {
      switch (this.sourceActive) {
        case "xc":
          return [
            {"label": "已取消" },
            {"label": "取消中" },
            {"label": "已退订" },
            {"label": "已确认" },
            {"label": "已下单" },
            {"label": "已支付" },
            {"label": "已排车" },
            {"label": "已取车" },
            {"label": "已续租" },
            {"label": "已暂停" },
            {"label": "已还车" },
            {"label": "已完成" },
            {"label": "租车预授权已结算" },
            {"label": "已三次结算" }
          ];
        case "zzc":
          return [
            {"label": "已取消"},
            {"label": "待定"},
            {"label": "未支付"},
            {"label": "支付中"},
            {"label": "已支付"},
            {"label": "已确认"},
            {"label": "已提车"},
            {"label": "已还车"},
            {"label": "已完成"}
          ];
        case "wk":
          return [
            {"label": "已取消"},
            {"label": "待接受预订"},
            {"label": "待支付"},
            {"label": "待用车"},
            {"label": "用车中"},
            {"label": "待结算"},
            {"label": "待违章处理"},
            {"label": "已完成"},
          ];
        case "fz":
          return [
            {"label": "已取消"},
            {"label": "待支付"},
            {"label": "已支付"},
            {"label": "已确认"},
            {"label": "已取车"},
            {"label": "已还车"},
            {"label": "已完成"}
          ];
        case "at":
          return [
            {"label": "已取消"},
            {"label": "已下单"},
            {"label": "已排车"},
            {"label": "已支付"},
            {"label": "已取车"},
            {"label": "已还车"},
            {"label": "已完成"}
          ];
        case "hl":
          return [
            {"label": "已取消"},
            {"label": "待取车"},
            {"label": "待还车"},
            {"label": "已完成"}
          ];
        default:
          return [];
      }
    },
  },
  mounted() {
    let key = this.$route.query.key
    let orderSourceCode = this.$route.query.orderSourceCode

    this.active = key
    this.queryParams.type = key

    this.queryParams.orderSourceCode=orderSourceCode
    this.sourceActive=orderSourceCode

    this.getList();
    this.getOrderCount();
    this.getAllStore();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getAllStore() {
      getAllStore().then((response) => {
        this.storeOptions = response.data
      })
    },
    orderTypeChange(val) {
      this.active = val
      this.queryParams.type = val
      this.getList()
    },
    orderSourceChange(val) {
      this.sourceActive = val
      this.queryParams.orderSourceCode = val
      this.queryParams.orderStatusName = null
      this.getList();
      this.getOrderCount();
    },
    getOrderCount() {
      selectOrderCount(this.queryParams).then((response) => {
        let byCodeCount = response.data.byCode
        this.tabs_list= [
          {
            key: '',
            name: '全部订单',
            count: byCodeCount.allOrder
          },
          {
            key: 'xc',
            name: '携程订单',
            count: byCodeCount.xc
          },
          {
            key: 'hl',
            name: '哈啰订单',
            count: byCodeCount.hl
          },
          {
            key: 'wk',
            name: '悟空订单',
            count: byCodeCount.wk
          },
          {
            key: 'zzc',
            name: '租租车订单',
            count: byCodeCount.zzc
          },
          {
            key: 'at',
            name: '凹凸订单',
            count: byCodeCount.at
          },
          {
            key: 'fz',
            name: '飞猪订单',
            count: byCodeCount.fz
          }
        ];
        let orderCount = response.data.byType
        this.tabs_list1 = [
          {
            key: '1',
            name: '全部订单',
            count: orderCount.allOrder
          },
          {
            key: '2',
            name: '待排车',
            count: orderCount.pc
          },
          {
            key: '3',
            name: '待取车',
            count: orderCount.qc
          },
          {
            key: '4',
            name: '用车中',
            count: orderCount.yc
          },
          {
            key: '5',
            name: '明日取车',
            count: orderCount.tomorrowTakeCar
          },
          {
            key: '6',
            name: '明日还车',
            count: orderCount.tomorrowReturnCar
          },
          {
            key: '7',
            name: '今日取车',
            count: orderCount.jrqc
          },
          {
            key: '8',
            name: '今日还车',
            count: orderCount.jrhc
          },
          {
            key: '9',
            name: '2小时内取车',
            count: orderCount.twohqc
          },
          {
            key: '10',
            name: '2小时内还车',
            count: orderCount.twohhc
          },
          {
            key: '11',
            name: '逾期未取车',
            count: orderCount.yqwq
          },
          {
            key: '12',
            name: '逾期未还车',
            count: orderCount.yqwh
          }
        ]
      })
    },
    /** 查询携程订单列表 */
    getList() {
      this.loading = true;
      listCtrip(this.queryParams).then(response => {
        this.ctripList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    syncSuccess(){
      this.opensyncmodel=false
      this.handleQuery()
    },

    goToPage(type){
      switch (type) {
        case 1://租金统计
          this.$router.push({ path: '/record/otaOrder/otaOrder' });
          break;
        case 2://账号配置
          this.$router.push({path: '/tenantCenter/ota/otaAccount'});
          break;
        case 3://门店配置
          this.$router.push({path: '/tenantCenter/ota/otastore'});
          break;
        case 4://车型配置
          this.$router.push({ path: '/tenantCenter/ota/otamodel' });
          break;
        case 5://OTA平台库存占用释放
          this.$router.push({ path: '/ota/otaCarInventory' });
          break;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      //this.reset();
    },
    //预计还车时间发生改变
    takeTimeChange(e) {
      this.queryParams.takeStartTime = e[0];
      this.queryParams.takeEndTime = e[1];
    },
    //预计还车时间发生改变
    actualTakeTimeChange(e) {
      this.queryParams.actualTakeStart = e[0];
      this.queryParams.actualTakeEnd = e[1];
    },
    //预计还车时间发生改变
    rentalTimeChange(e) {
      this.queryParams.rentalStartTime = e[0];
      this.queryParams.rentalEndTime = e[1];
    },
    //预计还车时间发生改变
    actualTimeChange(e) {
      this.queryParams.actualStartTime = e[0];
      this.queryParams.actualEndTime = e[1];
    },
    //下单时间发生改变
    createTimeChange(e) {
      this.queryParams.createStartTime = e[0];
      this.queryParams.createEndTime = e[1];
    },

    // 表单重置
    reset() {
      this.queryParams = {
        pageNum:1,
        pageSize:10,
        orderEncryptId: null,
        createOrderDateTime: null,
        estimatedPickUpTime: null,
        estimatedPickOffTime: null,
        platformPickOffStoreId: null,
        platformPickUpStoreId: null,
        rentDays: null,
        rentHours: null,
        realRentDays: null,
        pickUpStoreName: null,
        pickUpAddress: null,
        orderIsSendNameForPickUp: null,
        pickOffStoreName: null,
        pickOffAddress: null,
        orderIsSendNameForPickOff: null,
        orderSource: null,
        orderStatus: 0,
        orderStatusName: null,
        costumerName: null,
        costumerTel: null,
        constumerId: null,
        customerType: null,
        customerTypeName: null,
        amount: null,
        actualAmount: null,
        payWay: null,
        payWayName: null,
        preAuthAmount: null,
        payCarPreAuthWay: null,
        payCarPreAuthWayName: null,
        preauthinfoPreAuthAmount: null,
        depPreAuthAmount: null,
        payDepPreAuthWay: null,
        payDepPreAuthWayName: null,
        preauthinfoDepPreAuthAmount: null,
        pickupMile: null,
        actualPickUpTime: null,
        pickupFuel: null,
        pickoffMile: null,
        actualPickOffTime: null,
        pickoffFuel: null,
        carLicenceNum: null,
        frameNum: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
        deptId: null,
        rentalStartTime: null,
        rentalEndTime:null,
        actualStartTime:null,
        actualEndTime:null,
        takeTimeRange:[],
        actualTakeTimeRange:[],
        rentalTimeRange : [],
        actualTimeRange : [],
        createTimeRange : [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.getOrderCount();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetQueruyForm();
      this.handleQuery();
    },
    resetQueruyForm() {
      if(this.queryParams.takeTimeRange.length>0) {
        this.queryParams.takeStartTime = null;
        this.queryParams.takeEndTime = null;
      }
      if(this.queryParams.actualTakeTimeRange.length>0) {
        this.queryParams.actualTakeStart = null;
        this.queryParams.actualTakeEnd = null;
      }
      if(this.queryParams.rentalTimeRange.length>0) {
        this.queryParams.rentalStartTime = null;
        this.queryParams.rentalEndTime = null;
      }
      if(this.queryParams.actualTimeRange.length>0) {
        this.queryParams.actualStartTime = null;
        this.queryParams.actualEndTime = null;
      }
      if(this.queryParams.createTimeRange.length>0) {
        this.queryParams.createStartTime = null;
        this.queryParams.createEndTime = null;
      }
      this.$refs.queryForm.resetFields();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log('选中项', selection);
      this.syncType = selection.length;
      this.ids = selection.map(item => item.orderEncryptId);
    },
    //同步至日租订单
    handleSync() {
      if (this.syncType == 0) {//未选择同步的订单
        this.$message({
          type:'warning',
          message:'请至少选择一个同步项'
        })
      }else if(this.syncType == 1) {//单个同步

        otaSyncOrders(this.ids[0]).then(res=>{
          if (res.code == 200) {
            this.$router.push({ path: '/orderBasic/add', query: { orderNo: this.ids[0],type:1 }});
          }
        })

      }else  {//批量同步
        batchOtaSyncOrders(this.ids).then(res=>{
          this.$message({
            type:'success',
            message:res.msg
          })
          this.getList();
          this.getOrderCount();
        })

      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openSync = true;
      this.title = "订单同步";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderEncryptId = row.orderEncryptId || this.ids
      getCtrip(orderEncryptId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改携程订单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderEncryptId != null) {
            updateCtrip(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCtrip(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderEncryptIds = row.orderEncryptId || this.ids;
      this.$modal.confirm('是否确认删除携程订单编号为"' + orderEncryptIds + '"的数据项？').then(function() {
        return delCtrip(orderEncryptIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    selectable(row) {
      return row.isSync == 1? false : true;
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有OTA订单数据项？').then(() => {
        this.exportLoading = true;
        return exportCtrip(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    handleImport() {
      this.upload.title = 'OTA订单导入';
      this.upload.open = true;
      this.upload.data.orderSource = null;
      if(null != this.$refs && null != this.$refs.upload){
        this.$refs.upload.clearFiles();
      }

    },
    handleChange(file, fileList) {
      fileList[0] = file;
      if(fileList.length == 2){
        fileList.length = fileList.length - 1
      }
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    handleFileSuccess(response, file, fileList) {
      this.upload.loading.close();
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', {
        dangerouslyUseHTMLString: true
      })
      if(200 == response.code){
        this.getList()
        this.upload.open = false
      }
      /* if(200 != response.code){
         this.$alert(response.msg, '导入结果')
         this.upload.isUploading = true
         return ;
       }*/

    },
    submitFileForm() {
      if(null == this.upload.data.orderSource || "" == this.upload.data.orderSource){
        this.$alert("请选择订单来源", '导入结果')
        return ;
      }
      this.upload.loading = this.$loading({
        lock: true,
        text: '正在导入中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$refs.upload.submit()
    },
  }
};
</script>
<style scoped>
.model-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plat-model{
  color: #00c585;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.min-box {
  overflow: hidden;
  height: 40px
}
</style>
